<template>
  <div class="wrapper">
    <!-- 左侧视图 -->
    <div class="index_left">
      <el-card class="box-card">
        <div class="itemGroup">
          <div class="text item">
            <img
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
              alt=""
            />
            <div class="item-info">
              <div class="info-title">销售总额</div>
              <div>51242.00</div>
            </div>
          </div>
          <div class="text item">
            <img
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
              alt=""
            />
            <div class="item-info">
              <div class="info-title">商品总量</div>
              <div>40</div>
            </div>
          </div>
          <div class="text item">
            <img
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
              alt=""
            />
            <div class="item-info">
              <div class="info-title">门店总数</div>
              <div>200</div>
            </div>
          </div>
        </div>
      </el-card>
      <!-- echart图表 -->
      <el-card class="box-card m-t">
        <div class="echartDiv">
          <div class="echart-item">
            <Echart :id="1111" :options="state.optionsA"></Echart>
          </div>
          <div class="echart-item">
            <Echart :id="2222" :options="state.optionsB"></Echart>
            </div>
        </div>
      </el-card>
      <!-- 排名 -->
      <div class="sortDiv m-t">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>商品销量排名</span>
            </div>
          </template>
          <div v-for="o in 4" :key="o" class="text item">
            {{ "列表内容 " + o }}
          </div>
        </el-card>
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>门店进货排名</span>
            </div>
          </template>
          <div v-for="o in 4" :key="o" class="text item">
            {{ "列表内容 " + o }}
          </div>
        </el-card>
      </div>
    </div>
    <!-- 右侧视图 -->
    <div class="index_right">
      <el-card :body-style="state.tstyle">
        <div class="option">
          <div class="vAlign">
            <div class="btn_item">修改头像</div>
            <div class="btn_item" @click="openDing()">绑定钉钉</div>
            <div class="btn_item" @click="open_login_pwd()">修改登录密码</div>
          </div>
          <div class="vAlign m-t">
            <div class="btn_item" @click="open_phone()">修改手机</div>
            <div class="btn_item" @click="open_wx()">绑定微信</div>
            <div class="btn_item" @click="open_option_pwd()">修改操作密码</div>
          </div>
        </div>
      </el-card>
      <!-- 用户信息 -->
      <el-card class="box-card m-t" :body-style="state.tstyle">
        <template #header>
          <div class="card-header" :head-style="state.tstyle">
            <span>用户信息</span>
          </div>
        </template>
        <el-row class="m-t" type="flex" :gutter="40" justify="left">
          <el-col :span="10">用户手机:</el-col>
          <el-col :span="8">{{ state.phone }}</el-col>
        </el-row>
        <el-row class="m-t" type="flex" :gutter="40" justify="left">
          <el-col :span="10">所在部门:</el-col>
          <el-col :span="8">技术部</el-col>
        </el-row>
        <el-row class="m-t" type="flex" :gutter="40" justify="left">
          <el-col :span="10">在任职务:</el-col>
          <el-col :span="8">产品经理</el-col>
        </el-row>
        <el-row class="m-t" type="flex" :gutter="40" justify="left">
          <el-col :span="10">在任职务:</el-col>
          <el-col :span="8">产品经理</el-col>
        </el-row>
        <el-row class="m-t" type="flex" :gutter="40" justify="left">
          <el-col :span="10">创建人:</el-col>
          <el-col :span="8"></el-col>
        </el-row>
        <el-row class="m-t" type="flex" :gutter="40" justify="left">
          <el-col :span="10">创建时间:</el-col>
          <el-col :span="8"></el-col>
        </el-row>
        <el-row class="m-t" type="flex" :gutter="40" justify="left">
          <el-col :span="10">最后登录时间:</el-col>
          <el-col :span="8"></el-col>
        </el-row>
        <el-row class="m-t" type="flex" :gutter="40" justify="left">
          <el-col :span="10">登陆系统:</el-col>
          <el-col :span="8"></el-col>
        </el-row>
        <el-row class="m-t" type="flex" :gutter="40" justify="left">
          <el-col :span="10">浏览器:</el-col>
          <el-col :span="8"></el-col>
        </el-row>
        <el-row class="m-t" type="flex" :gutter="40" justify="left">
          <el-col :span="10">内核版本:</el-col>
          <el-col :span="8"></el-col>
        </el-row>
      </el-card>
      <!-- 系统公告 -->
      <el-card class="box-card m-t" :body-style="state.tstyle">
        <template #header>
          <div class="card-header">
            <span>系统公告</span>
            <el-link type="primary">更多</el-link>
          </div>
        </template>
        <div class="row-record">
          <div class="eventW fontBlack">事件名称</div>
          <div class="optionMan fontBlack">操作人</div>
          <div class="option_time fontBlack">时间</div>
        </div>
        <div class="noteDiv">
          <div class="row-record" v-for="item in 3">
            <div class="eventW">事件名称</div>
            <div class="optionMan">操作人</div>
            <div class="option_time">2020-02-16 14:00:32</div>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 钉钉对话框 -->
    <el-dialog
      title="绑定钉钉"
      v-model="state.dd_dialogVisible"
      width="20%"
      center
    >
      <span>
        <img
          class="dd_img"
          src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
        />
        <div style="text-align: center; margin-top: 10px">请使用钉钉扫描</div>
      </span>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="state.dd_dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!-- 登录密码对话框 -->
    <el-dialog
      title="修改登陆密码"
      v-model="state.login_dialogVisible"
      width="20%"
      center
    >
      <span>
        <el-form
          :model="state.ruleForm"
          :rules="state.rules"
          ref="form"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="原密码" prop="oldpwd">
            <el-input v-model="state.ruleForm.oldpwd"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newpwd">
            <el-input v-model="state.ruleForm.newpwd"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmpwd">
            <el-input v-model="state.ruleForm.confirmpwd"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.login_dialogVisible = false"
            >取 消</el-button
          >
          <el-button type="primary" @click="confirm_sub_login()"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!-- 手机对话框 -->
    <el-dialog
      title="修改手机"
      v-model="state.phone_dialogVisible"
      width="20%"
      center
    >
      <span>
        <el-form
          :model="state.ruleForm"
          :rules="state.rules"
          ref="form"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="state.ruleForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="操作密码" prop="phonepwd">
            <el-input v-model="state.ruleForm.phonepwd"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.phone_dialogVisible = false"
            >取 消</el-button
          >
          <el-button type="primary" @click="confirm_sub_phone()"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!-- 微信对话框 -->
    <el-dialog
      title="绑定微信"
      v-model="state.wx_dialogVisible"
      width="20%"
      center
    >
      <span>
        <img
          class="wx_img"
          src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
        />
        <div style="text-align: center; margin-top: 10px">请使用微信扫描</div>
      </span>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="state.wx_dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!-- 操作密码对话框 -->
    <el-dialog
      title="修改操作密码"
      v-model="state.option_dialogVisible"
      width="20%"
      center
    >
      <span>
        <el-form
          :model="state.ruleForm"
          :rules="state.rules"
          ref="form"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="原密码" prop="oldpwd">
            <el-input v-model="state.ruleForm.oldpwd"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newpwd">
            <el-input v-model="state.ruleForm.newpwd"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmpwd">
            <el-input v-model="state.ruleForm.confirmpwd"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.option_dialogVisible = false"
            >取 消</el-button
          >
          <el-button type="primary" @click="confirm_sub_option()"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import Echart from "../components/Echart.vue";
import { ref, onMounted, reactive, getCurrentInstance } from "vue";
import { ElNotification } from "element-plus";
export default {
    name:'index',
  components: {
    Echart,
  },
  props: {},
  data() {
    return {};
  },
  setup() {
    let form = ref(null);
    const { ctx } = getCurrentInstance();
    const state = reactive({
      dd_dialogVisible: false,
      login_dialogVisible: false,
      phone_dialogVisible: false,
      wx_dialogVisible: false,
      option_dialogVisible: false,
      tstyle: { padding: "10px" },
      phone: "",
      ruleForm: {
        oldpwd: "",
        newpwd: "",
        confirmpwd: "",
        phone: "",
        phonepwd: "",
      },
      rules: {
        oldpwd: [{ required: true, message: "请输入原密码", trigger: "blur" }],
        newpwd: [{ required: true, message: "请输入新密码", trigger: "blur" }],
        confirmpwd: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
        ],
        phone: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
        phonepwd: [
          { required: true, message: "请输入操作密码", trigger: "blur" },
        ],
      },
      optionsA: {title:{
            text:'订单金额'
        },
        tooltip:{},
        legend:{
            data:['访客来源']
        },
        xAxis:{
            data:["智联招聘","51job","拉钩","Boss直聘"]
        },
        yAxis:{
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        grid:{
        left: '5%',   // 与容器左侧的距离
         right: '5%', // 与容器右侧的距离
         top: '15%',   // 与容器顶部的距离
         bottom: '10%', // 与容器底部的距离
      },
        series:[{
          itemStyle: {
            normal: {
              color: '#FF005A',
              lineStyle: {
                color: '#FF005A',
                width: 2
              }
            }
          },
            name:'访问量',
            type:'line',
            data:[600,310,200,800]
        }]
      },
       optionsB: {title:{
            text:'新增会员数'
        },
        tooltip:{},
        legend:{
            data:['啦啦啦啦']
        },
         tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        xAxis:{
            data:["智联招聘","51job","拉钩","Boss直聘"]
        },
        grid:{
        left: '5%',   // 与容器左侧的距离
         right: '5%', // 与容器右侧的距离
         top: '15%',   // 与容器顶部的距离
         bottom: '10%', // 与容器底部的距离
      },
        yAxis:{
        },
        series:[{
          smooth: true,
          type: 'line',
          itemStyle: {
            normal: {
              color: '#3888fa',
              lineStyle: {
                color: '#3888fa',
                width: 2
              },
              areaStyle: {
                color: '#f3f8ff'
              }
            }
          },
            name:'访问量',
            type:'line',
            data:[0,600,150,305],
             animationDuration: 2800,
          animationEasing: 'cubicInOut'
        }]
      },
    });
    // 打开钉钉弹窗
    function openDing() {
      state.dd_dialogVisible = true;
    }
    // 打开登录密码弹窗
    function open_login_pwd() {
      state.ruleForm.oldpwd = "";
      state.ruleForm.newpwd = "";
      state.ruleForm.confirmpwd = "";
      state.login_dialogVisible = true;
    }
    // 打开手机弹窗
    function open_phone() {
      state.ruleForm.phone = "";
      state.ruleForm.phonepwd = "";
      state.phone_dialogVisible = true;
    }
    // 打开微信
    function open_wx() {
      state.wx_dialogVisible = true;
    }
    // 打开操作密码
    function open_option_pwd() {
      state.ruleForm.oldpwd = "";
      state.ruleForm.newpwd = "";
      state.ruleForm.confirmpwd = "";
      state.option_dialogVisible = true;
    }
    // 登录密码提交
    function confirm_sub_login() {
      form.value.validate((valid) => {
        if (valid) {
          let data = {
            oldpwd: state.ruleForm.oldpwd,
            newpwd: state.ruleForm.newpwd,
            confirmpwd: state.ruleForm.confirmpwd,
          };
          console.log(data);
          ctx.$http
            .post(
              "https://www.fastmock.site/mock/403b6ba32d7466f0039c36115bec6175/auth/usermenu",
              data
            )
            .then((res) => {
              ElNotification.success(res.errmsg);
              state.login_dialogVisible = false;
            })
            .catch((err) => {
              ElNotification.error(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
    // 手机提交
    function confirm_sub_phone() {
      form.value.validate((valid) => {
        if (valid) {
          let data = {
            phone: state.ruleForm.phone,
            phonepwd: state.ruleForm.phonepwd,
          };
          ctx.$http
            .post(
              "https://www.fastmock.site/mock/403b6ba32d7466f0039c36115bec6175/auth/usermenu",
              data
            )
            .then((res) => {
              ElNotification.success(res.errmsg);
            })
            .catch((err) => {
              ElNotification.error(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
    // 操作密码提交
    function confirm_sub_option() {
      form.value.validate((valid) => {
        if (valid) {
          let data = {
            oldpwd: state.ruleForm.oldpwd,
            newpwd: state.ruleForm.newpwd,
            confirmpwd: state.ruleForm.confirmpwd,
          };
          console.log(data);
          ctx.$http
            .get(
              "https://www.fastmock.site/mock/403b6ba32d7466f0039c36115bec6175/auth/usermenu",
              data
            )
            .then((res) => {
              ElNotification.success(res.errmsg);
              state.login_dialogVisible = false;
            })
            .catch((err) => {
              ElNotification.error(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
    // 组件挂载到页面
    onMounted(() => {
      // getOrderList();
    });
    //  获取页面数据
    function getOrderList() {
      ctx.$http
        .get(
          "https://www.fastmock.site/mock/403b6ba32d7466f0039c36115bec6175/auth/usermenu",
          { name: 111 }
        )
        .then((res) => {
          console.log(res);
          state.phone = "12346789";
        })
        .catch((err) => {
          console.log(err);
        });
    }
    return {
      form,
      getOrderList,
      state,
      openDing,
      open_login_pwd,
      open_phone,
      confirm_sub_login,
      confirm_sub_phone,
      open_wx,
      open_option_pwd,
      confirm_sub_option,
    };
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  display: flex;
  justify-content: space-between;
  .index_left {
    width: 74.5%;
    box-sizing: border-box;
    .box-card {
      .itemGroup {
        display: flex;
        height: 130px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        .item {
          display: flex;
          .item-info {
            margin-left: 20px;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: space-evenly;
            font-weight: bold;
            color: #535353;
          }
        }
      }
      img {
        width: 90px;
        height: 90px;
        border-radius: 50%;
      }
    }
    // 图表
    .echartDiv {
      display: flex;
      justify-content: space-between;
      height: 350px;
      .echart-item {
        width: 49%;
        height: 300px;
      }
    }
    // 排名
    .sortDiv {
      display: flex;
      box-sizing: border-box;
      justify-content: space-between;
      overflow-y: auto;
      .box-card {
        width: 49.5%;
        height: 240px;
      }
    }
  }
  .index_right {
    width: 25%;
    // 右侧按钮
    .option {
      .vAlign {
        display: flex;
        justify-content: space-between;
        .btn_item {
          padding: 4px;
          border: 1px solid #1890ff;
          border-radius: 2px;
          cursor: pointer;
          color: #1890ff;
          font-size: 14px;
        }
        .btn:hover {
          background: #1890ff;
          color: white;
        }
      }
    }
    .row-record {
      display: flex;
      align-items: center;
      font-size: 14px;
      .eventW {
        width: 40%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .fontBlack {
        color: black;
        font-weight: bold;
        font-size: 16px;
      }
      .optionMan {
        width: 30%;
        text-align: center;
      }
      .option_time {
        width: 30%;
        text-align: center;
      }
    }
    .noteDiv {
      height: 225px;
      overflow-y: auto;
    }
  }
  .m-t {
    margin-top: 10px;
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .el-card /deep/ .el-card__header {
    padding: 8px 10px;
    font-weight: bold;
  }
  .el-card /deep/ .el-card__body {
    padding: 10px;
  }
  .dd_img,
  .wx_img {
    width: 160px;
    height: 160px;
    display: block;
    margin: auto;
  }
}
</style>